<template>
    <div class="i-table-no-border">
        <Drawer title="详细" width="600" v-model="drawer">
            <div class="t-main" v-for="(item, index) in dataList" :key="'item' + index">
                <p class="time">{{item.recently_clinic_time}}</p>
                <Table v-if="temp === '1'" border :loading="loading" :columns="columns" :data="item.content" size="small">
                    <template slot-scope="{ row }" slot="dose">
                        {{ row.dose + '/mj' }}
                    </template>
                </Table>
                <Table v-else-if="temp === '2'" border :loading="loading" :columns="columns2" :data="item.content" size="small">
                    <template slot-scope="{ row }" slot="dose">
                        {{ row.dose + '/mj' }}
                    </template>
                </Table>
                <Table v-else-if="temp === '3'" border :loading="loading" :columns="columns3" :data="item.content" size="small"></Table>
                <Table v-else-if="temp === '4'" border :loading="loading" :columns="columns4" :data="item.content" size="small">
                    <template slot-scope="{ row }" slot="dose">
                        {{ row.dose + '/ms' }}
                    </template>
                </Table>
                <Table v-else-if="temp === '5'" border :loading="loading" :columns="columns5" :data="item.content" size="small">
                    <template slot-scope="{ row }" slot="dose">
                        {{ row.dose + '/min' }}
                    </template>
                </Table>
                <p class="ivu-m-16">
                    <span style="margin-right: 5px">本次治疗:<strong>{{item.recently_num}}</strong> </span>
                    <span>本次剩余:<strong>{{item.num}}</strong> </span>
                </p>
                <p class="ivu-m-16" v-if="temp === '1'">
                    <span>备注:{{ item.remark }}</span>
                </p>
                <p class="ivu-m-16 sign-area">
                    <span class="sign-label">患者签名:</span>
                    <strong class="sign-img">
                        <img :src="item.patient_signature" alt="">
                    </strong>
                </p>
            </div>
            <div class="btnMore">
                <Button v-show="edit && status" type="primary" :loading="loadingBtn" @click="getMoreData">加载更多</Button>
                <span v-show="!edit && status">{{ dataList.length === 0 ? '暂无数据' : '没有更多了...' }}</span>
            </div>
        </Drawer>
    </div>
</template>
<script>
    import { GetTreatmentInfo, GetUpdateList } from '@api/treatment'

    export default {
        data () {
            return {
                errorImg: require('@/assets/images/error.jpg'),
                loading: false,
                drawer: false,
                columns: [
                    {
                        title: '大部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '细节部位',
                        align: 'center',
                        key: 'body_parts_small_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    },
                    {
                        title: '数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns2: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '剂量',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns3: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    }
                ],
                columns4: [
                    {
                        title: '执行部位',
                        align: 'center',
                        key: 'body_parts_large_name'
                    },
                    {
                        title: '剂量/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                columns5: [
                    {
                        title: '执行数量',
                        align: 'center',
                        key: 'num'
                    },
                    {
                        title: '执行时长/时间',
                        align: 'center',
                        slot: 'dose'
                    }
                ],
                dataList: [],
                page: 1,
                pageSize: 3,
                itemData: {},
                oldId: '',
                edit: true,
                status: null,
                params: {},
                loadingBtn: false,
                temp: '1'
            }
        },
        props: ['projects'],
        methods: {
            imgError (item) {
                item.patient_signature = this.errorImg
            },
            getViewTreatmentList () {
                this.loading = true
                GetTreatmentInfo({ clinic_treatment_id: this.itemData.id }).then((res) => {
                    this.dataList.push({
                        content: res.list || [],
                        ...res.user_patient
                    })
                }).finally(() => {
                    this.$nextTick(() => {
                        this.loading = false
                    })
                })
            },
            getOldList () {
                this.drawer = true
                this.loadingBtn = true
                const config = {
                    patient_card_id: this.params.patient_card_id,
                    clinic_project_id: this.params.clinic_project_id,
                    page: this.page,
                    pageSize: this.pageSize
                }
                GetUpdateList(config).then(res => {
                    if ((this.page * this.pageSize) >= res.total) { this.edit = false } else this.edit = true
                    this.dataList = [...this.dataList, ...res.list]
                }).finally(() => {
                    this.$nextTick(() => { this.loadingBtn = false })
                })
            },
            handleDetail (row, status, temp) {
                this.temp = temp
                this.dataList = []
                this.status = status
                this.page = 1
                if (status) {
                    // 查看全部详细信息
                    this.params = row
                    this.getOldList()
                } else {
                    this.drawer = true
                    this.itemData = row
                    this.getViewTreatmentList()
                }
            },
            getMoreData () {
                // 获取更多数据
                if (this.loadingBtn) return false
                else {
                    this.page++
                    this.getOldList()
                }
            }
        }
    }
</script>
<style scoped lang="less">
    .v-tit {
        margin-bottom:8px;
    }
    .v-tit span {
        font-size:14px;
        margin-left:10px;
        color:#888;
    }
    .t-main p {
        color:#666;
        margin-bottom:8px;
    }
    .surplus strong {
        font-size:16px;
        margin-right:15px;
    }
    .t-main p strong {
        margin:0 10px;
        color:#333;
    }
    /*.consultant span {*/
    /*    margin:0 5px;*/
    /*}*/
    .sky-screen {
        margin-top:16px;
    }
    .sign-area {
        position: relative;
    }
    .sign-area .sign-label{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .sign-area .sign-img {
        margin-left: 80px;
    }
    .sign-area .sign-img img{
        max-width: 120px;
    }
    .c-inr-right{
        margin-right: 10px;
    }
    .t-main {
        margin-bottom: 24px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .btnMore {
        text-align: center;
        span {
            font-size: 16px;
            color: #333;
        }
    }
</style>
